import React, { useEffect, useState, useRef } from 'react'
import List from '../../components/List/list'
import * as echarts from 'echarts';
import moment from 'moment'
import { getLeftBtn, getRightTop, getRightBtn } from '../../api';
// 引入
import Content from '../../components/content/content';
import Navbar from '../../components/navbar/navbar';
import './index.scss'


function index() {
  // 接口获取
  // 学生分布情况

  // echarts图表 学生分布情况
  let box = useRef(null)
  const XData: any = []
  for (let a = 0; a < 7; a++) {
    XData.unshift(moment(+new Date() - a * 3 * 60 * 1000).format('kk:mm:ss'));
  }
  console.log(XData);

  let [option, setOption] = useState({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      icon: 'circle',
      smooth: true,
      showSymbol: false,
      // 设置文本为红色
      textStyle: {
        color: 'white'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
        showSymbol: false,
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
        showSymbol: false,
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
        smooth: true,
        showSymbol: false,
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320],
        smooth: true,
        showSymbol: false,
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        smooth: true,
        showSymbol: false,
      }
    ]
  })
  // 水电用量
  let box1 = useRef(null)
  let [option1, setOption1] = useState({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
      textStyle: {
        color: 'white'
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['2012', '2013', '2014', '2015', '2016']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Forest',
        type: 'bar',
        barGap: 0,
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390]
      },
      {
        name: 'Steppe',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290]
      },
      {
        name: 'Desert',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190]
      },
      {
        name: 'Wetland',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [98, 77, 101, 99, 40]
      }
    ]
  })

  // 校园人员流动
  let [option2, setOption2] = useState({

    legend: {
      textStyle: {
        color: 'white'
      }
    },
    tooltip: {},
    dataset: {
      dimensions: [],
      source: [

      ]
    },
    xAxis: { type: 'category', data: [] },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{
      type: 'bar', itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ]),
        borderRadius: 50,
      }
    },
    {
      type: 'bar', itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgb(63,227,148)' },
          { offset: 0.5, color: 'rgb(60,223,142)' },
          { offset: 1, color: 'rgb(58,220,136)' }
        ]),
        borderRadius: 50,
      },
    },

    ]
  })
  let box2 = useRef(null)
  // 实例 

  const [flag, setFlag] = useState(true);

  useEffect(() => {
    // 启动后端数据
    const url = 'ws://localhost:3002/bigscreen/websockets?id=10086';
    const newSock = new WebSocket(url)
    newSock.onopen = () => {
      console.log('建立连接');
    }
    
    if (flag) {
      // 学生分布情况
      getLeftBtn().then(res => {
        console.log('学生分布情况', res);
        newSock.onmessage = (e) => {
          console.log(e.data,'传递来的参数');
          const newArr = JSON.parse(e.data)
          option.legend.data = newArr.legendData;
          option.xAxis.data = XData
          option.series = newArr.seriesData.map((item: any, index: any) => {
            return {
              name: newArr.legendData[index],
              type: 'line',
              stack: 'Total',
              data: item,
              smooth: true,
              showSymbol: false,
            }
          })
          setOption(
            JSON.parse(JSON.stringify(option))
          )
        }
        // option.xAxis.data = XData
        // setOption({
        //   ...option,
        //   series: res.data.data.result[0].series,
        //   legend: res.data.data.result[0].legend,
        //   // xAxis:XData
        // })
        // console.log(res.data.data.result[0].legend);
      })
      // 水电用量
      getRightTop().then(res => {
        console.log('水电用量', res);
        option1.series = res.data.data.result[0].series;
        option1.xAxis = res.data.data.result[0].yAxis
        option1.legend.data = res.data.data.result[0].series.map((item: any) => item.name)
        setOption1({
          ...option1,
        })
      })
      // 校园人员流动情况
      getRightBtn().then(res => {
        console.log('校园人员流动情况', res);
        // option2.series = res.data.data.result[0].source.data;
        option2.xAxis.data = res.data.data.result[0].source.map((item: any) => item.product)
        option2.dataset = res.data.data.result[0]
        console.log(option2.xAxis);

        // option1.legend.data = res.data.data.result[0].dimensions
        setOption2({
          ...option2,
        })
      })
      setFlag(false)
    }

    var myChart = echarts.init(box.current);
    myChart.setOption(option);
    // 水电
    var myChart = echarts.init(box1.current);
    myChart.setOption(option1);
    // 校园人员流动情况
    var myChart = echarts.init(box2.current);
    myChart.setOption(option2);

  }, [option, option1,option2])

  return (
    <div className='box'>
      <div className='top'></div>
      <div className="left">
        <div className='left_top'>
          <List title="环境监测"></List>
          <div className='top1'>
            30 <span className='icon-sheshidu iconfont'></span>
            <span className='icon-taiyang1 iconfont'>高温黄色预警</span>
          </div>
          <div className="top2">
            <p>
              <span className='icon-tigan iconfont'> 体感</span>
              <span className='foot'>31°C</span>
            </p>
            <hr />
            <p>
              <span className='icon-fengli iconfont'> 风力</span>
              <span className='foot'>南风3级</span>
            </p>
            <hr />
            <p>
              <span className='icon-shidu iconfont'> 湿度</span>
              <span className='foot'>34%</span>
            </p>
          </div>
          <div className='top3'>
            <div>
              <p>
                <span>24~36°C</span>
                <span className='icon-yueliang2 iconfont'></span>
              </p>
              <p>
                <span>今天</span>
                <button>47优</button>
                <span>晴</span>
              </p>
            </div>
            <div>
              <p>
                <span>22~38°C</span>
                <span className='icon-taiyang1 iconfont'></span>
              </p>
              <p>
                <span>明天</span>
                <button>35优</button>
                <span>晴</span>
              </p>
            </div>
          </div>
        </div>
        <div className='left_button'>
          <List title="学生分布情况"></List>
          <div className='btn1' ref={box}>

          </div>
        </div>
      </div>
      <div className='center'>
        <Content></Content>
        <Navbar></Navbar>
      </div>
      <div className="right">
        <div className="right_top">
          <List title="水电用量"></List>
          <div>
            <div className='rig_title'>
              <p>
                <span className='icon-dianliang iconfont'></span>
                <span className='foot'>
                  <span>72670</span>
                  <span>总用电量</span>
                </span>
              </p>
              <p>
                <span className='icon-shuiliang iconfont'></span>
                <span className='foot'>6809(吨)</span>
              </p>
            </div>
            <div className="rig1" ref={box1}>

            </div>
          </div>
        </div>
        <div className="right_button">
          <List title="校园人员流动情况"></List>
          <div className='rig_title'>
            <p>
              <span className='icon-dianliang iconfont'></span>
              <span className='foot'>
                <span>72670</span>
                <span>总用电量</span>
              </span>
            </p>
            <p>
              <span className='icon-shuiliang iconfont'></span>
              <span className='foot'>6809(吨)</span>
            </p>
          </div>
          <div className="rig2" ref={box2}>

          </div>
        </div>
      </div>
    </div>

  )
}

export default index  